<template>
  <div>
    <div v-for="(item,index) in data" :key="index" style="display: flex;" class="select-tree">
      <template v-if="allLeaf(item.children,item.leaf)">
          <span class="scetitle">{{item.title}}</span>
      </template>
      <template v-else>
        <span class="scetitle">{{item.title}}:</span>
        <select-tree :selectTreeData="item.children"></select-tree>
      </template>
      
    </div>
  </div>
</template>
<script>
export default {
  name:'selectTree',
  props:{
    selectTreeData:{
      type:Array,
      default:null
    }
  },
  data() {
    return {
      data:[]
    }
  },
  computed: {
    allLeaf: () => {
      return (list,leaf) => {
        if(!leaf){
          let result = list.filter(item => item.leaf)
          if(result.length==list.length){
            return true
          }else{
            return false
          }
        }else{
          return true
        }
      }
    }
  },
  watch:{
    selectTreeData(value,oldvalue){
      console.log(value,oldvalue)
      this.data = value
    }
  },
  mounted() {
    this.data = this.selectTreeData
  }
}
</script>
<style lang="less" scoped>
  .select-tree{
    line-height: 20px;
  }
  .title{padding: 0 4px;}
</style>